<template>
  <div class="baoxiaoinput">
    <van-form @submit="onSubmit">
      <van-field
        v-model="billcode"
        name="单据编号"
        label="单据编号"
        required
        placeholder="请输入单据编号"
        readonly
      />
      <van-field
        v-model="cellphone"
        type="tel"
        name="手机号"
        label="手机号"
        required
        placeholder="请输入手机号"
      >
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <van-field
        v-model="vfcode"
        name="验证码"
        label="验证码"
        required
        placeholder="请输入验证码"
      />
      <van-field
        v-model="company"
        rows="1"
        autosize
        name="报销单位"
        label="报销单位"
        type="textarea"
        placeholder="如：校图书馆（可选）"
      />
      <van-field
        v-model="tel"
        type="tel"
        name="联系电话"
        label="联系电话"
        placeholder="输入单位的联系电话（可选）"
      />
      <van-field
        v-model="message"
        rows="4"
        autosize
        name="说明"
        label="说明"
        type="textarea"
        maxlength="200"
        placeholder="请输入单据说明"
        show-word-limit
      />
      <div style="margin: 16px;">
        <van-button plain round block type="info" native-type="submit">下一步</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'BaoxiaoInput',

  data() {
    return {
      billcode: 'u0012337',
      cellphone: '',
      vfcode: '',
      company: '',
      tel: '',
      message: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
      this.$router.push({
        path: '/BillUpload',
      });
    },
  },
};
</script>

<style scoped>

</style>
